<template>
	<view class="orderreceive" :style="{height: Height+'px'}">
		<view class="orderInfo">
			<view class="ordertime">
				{{orderInfo.startTime}}
			</view>
			<view class="orderservertime mt-2">
				用户预约服务时间
			</view>
			<view class="orderbox box mt-4">
				<view class="">
					出发地点:
				</view>
				<view class="">
					{{orderInfo.startAddress}}
				</view>
			</view>
			<view class="orderbox box mt-2">
				<view class="">
					就诊医院:
				</view>
				<view class="">
					{{orderInfo.hospitalName}}
				</view>
			</view>
			<view class="orderbox box mt-2">
				<view class="">
					用户备注:
				</view>
				<view class="">
					{{orderInfo.remark1==null?'暂无备注':orderInfo.remark1}}
				</view>
			</view>
		</view>
		<view class="orderInfomony mt-5" v-if="orderInfo.type==1">
			订单类型:门诊陪伴 本单酬劳:<text style="color: #FA3232;">￥80.0</text>
		</view>
		<view class="orderInfomony mt-5" v-if="orderInfo.type==2">
			订单类型:血透门诊陪伴 本单酬劳:<text style="color: #FA3232;">￥80.0</text>
		</view>
		<view class="orderInfomony mt-5" v-if="orderInfo.type==3">
			订单类型:代配药门诊陪伴 本单酬劳:<text style="color: #FA3232;">￥80.0</text>
		</view>
		<view class="sureorder" @tap="orderok(1)">
			确认接单
		</view>
		<view class="cancelorder" v-if="orderInfo.accompanyId==userInfo.userInfo.userAccompanyInfo.accompanyId" @tap="orderok(2)">
			放弃此单
		</view>
		<orange-fullloading textcolor="#4CA6FF" textsize="30" :loadshow="loadshow" text="加载中"></orange-fullloading>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				Height:500,
				orderNo:'',
				orderInfo:'',
				longitude:'',
				latitude:'',
				loadshow:true,
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.Height = res.windowHeight - uni.upx2px(0) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onLoad(option) {
			this.orderNo = option.orderNo
			this.orderdetails()
			this.getlocation()
		},
		onShow() {
			this.getUserInfo()
		},
		computed: mapState(['loginState', 'userInfo']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			getlocation(){
				let _this = this
				uni.getLocation({
				    type: 'gcj02',
				    success:  function(res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						_this.longitude = res.longitude
						_this.latitude = res.latitude
				    }
				});
			},
			orderok(type){
				this.$api.orderok({
					orderNo:this.orderNo,
					startLongitude:this.longitude,
					startLatitude:this.latitude,
					status:type,
				}).then((res) => {
					if(res.data.success){
						console.log(res.data.dataMap)
						if(this.orderInfo.payType!==5){
							uni.showToast({
								title:'接单成功',
								duration:1000,
								icon:"none"
							})
							uni.$emit('trigger',1)
							uni.navigateBack({
								delta:1
							})
						}
						
						if(this.orderInfo.payType==5){
							uni.requestPayment({
								appId:res.data.dataMap.appid,
							    provider: 'wxpay',
							    timeStamp:res.data.dataMap.timeStamp,
							    nonceStr: res.data.dataMap.nonceStr,
							    package: res.data.dataMap.package,
							    signType: 'MD5',
							    paySign: res.data.dataMap.paySign,
							    success: function (res) {
							        console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '支付成功',
										duration: 500,
										icon: "none"
									});			
									uni.$emit('trigger',1)
									uni.navigateBack({
										delta:1
									})			
							    },
							    fail: function (err) {
							       uni.showToast({
							       	title: '支付失败',
							       	duration: 500,
							       	icon: "none"
							       });
							    }
							});
						}
						
						// this.awaitlist = res.data.dataMap.list
					}else if(res.data.code==20029){
						uni.navigateTo({
							url:'authentication'
						})
					}else{
						uni.showToast({
							title:res.data.message,
							duration:1000,
							icon:"none"
						})
					}
					
							
				})
			},
			orderdetails(){
				this.$api.orderdetails({
					orderNo:this.orderNo
				}).then((res) => {
					this.loadshow = false
					if(res.data.success){
						console.log(res.data.dataMap)
						this.orderInfo = res.data.dataMap
					}
					
							
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.orderreceive{
	background: #F2F7FF;
	overflow: hidden;
}
.orderInfo{
	width: 630rpx;
	// min-height: 450rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	padding: 50rpx 30rpx;
	// text-align: center;
	.ordertime{
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.orderservertime{
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}
	.orderbox{
		view:nth-child(1){
			width: 150rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
		view:nth-child(2){
			width: 486rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}
.orderInfomony{
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
}
.sureorder{
	width: 690rpx;
	height: 100rpx;
	background: linear-gradient(90deg, #4DBDFD 0%, #508BEF 100%);
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(80, 139, 239, 0.16);
	border-radius: 8rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 100rpx;
	text-align: center;
	margin: 0 auto;
	margin-top: 40rpx;
}
.cancelorder{
	width: 690rpx;
	height: 100rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(80, 139, 239, 0.16);
	border-radius: 8rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #999999;
	line-height: 100rpx;
	text-align: center;
	margin: 0 auto;
	margin-top: 40rpx;
}
</style>
